import React, {useEffect, useRef, useState} from 'react';
import {ConfigProvider, Table} from 'antd';

export default function ScrollTable(props: any) {
    const { dataSource, rollTime = 100, rollNum = 10, rollTop = 1.5, flag = true } = props;
    const [timer, setTimer] = useState<NodeJS.Timer>(); // 定时器
    const TableContainer = useRef<any>();
    useEffect(() => {
        InitialScroll(dataSource);
        return () => {
            clearInterval(timer);
        };
    }, []); // 检测数组内变量 如果为空 则监控全局

    // 开启定时器
    const InitialScroll = (data: any) => {
        let container = TableContainer.current;
        container = container.getElementsByClassName('ant-table-body')[0];
        if (data.length > Number(rollNum) && flag) {
            // 只有当大于10条数据的时候 才会看起滚动
            let time = setInterval(() => {
                container.scrollTop += Number(rollTop);
                if (
                    Math.ceil(container.scrollTop) >= Number(container.scrollHeight - container.clientHeight)
                ) {
                    container.scrollTop = 0;
                    // setTimeout(() => { container.scrollTop = 0 }, 1000)
                }
            }, rollTime);
            setTimer(time); // 定时器保存变量 利于停止
        }
    };
    return (
        <div
            // onMouseOver={() => {
            //     clearInterval(timer);
            // }}
            // onMouseOut={() => {
            //     InitialScroll(dataSource);
            // }}
            style={{height: '100%', backgroundColor: '#1F4E78'}}
        >
            <ConfigProvider
                theme={{
                    "token": {
                        "borderRadius": 1,
                        "wireframe": false,
                        "colorBgBase": "1F4E78",
                        "colorText": "#ffffff",
                        "lineHeight": 1
                    }
                }}>
                <Table
                    bordered={true}
                    ref={TableContainer}
                    pagination={false}
                    // scroll={{y: 'calc(100vh - 47px)'}}
                    scroll={{y: 'calc(100vh - 200px)'}}
                    {...props}
                />
            </ConfigProvider>

        </div>
    );
}

